<template>
	<div class="main">
		<div class="header">
			vue-cli脚手架练习
		</div>
		<div class="section">
			<div class="nav">
				<el-radio-group v-model="isCollapse" class="marginB20">
					<el-radio-button :label="false">展开</el-radio-button>
					<el-radio-button :label="true">收起</el-radio-button>
				</el-radio-group>
				<el-menu :default-active="defaultActive" :collapse="isCollapse" :router="true">
					<template v-for="item in navList">
						<el-menu-item :index="item.url">
							<i :class="item.icon"></i>
							<span slot="title">{{item.title}}</span>
						</el-menu-item>
					</template>
				</el-menu>
			</div>
			<div class="content padding20">
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'main',
		data(){
			return{
				isCollapse:false,
				defaultActive:'/one',
				navList:[{
					icon:'el-icon-message',
					url:'/one',
					title:'Carousel走马灯'
				},
				{
					icon:'el-icon-menu',
					url:'/two',
					title:'Collapse折叠面板'
				},
				{
					icon:'el-icon-document',
					url:'/three',
					title:'Steps步骤条'
				},{
					icon:'el-icon-star-on',
					url:'/four',
					title:'tabs标签页'
				}]
			}
		}
	}
</script>

<style scoped>
	
</style>